#cudUpdataBox {
  width: 600px;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 0 10px #ccc;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  position: fixed;
  bottom: 0px;
  right: 50px;
  overflow: hidden;
  z-index: 99;
}
#cudUpdataBox,
* {
  font-size: 12px;
  font-weight: 200;
}
#cudUpdataBox .updataHeader {
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  color: #7d818a;
  padding: 0px 20px;
  border-bottom: 1px solid #eeefff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#cudUpdataBox .updataHeader .close .iconfont {
  cursor: pointer;
  margin-left: 10px;
  font-size: 10px;
}
#cudUpdataBox .updatatitle {
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eeefff;
}
#cudUpdataBox .updatatitle .updataItemName {
  flex: 2;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
#cudUpdataBox .updatatitle .updataItemProgress {
  flex: 3;
}

#cudUpdataBox .updataItem {
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eeefff;
}
#cudUpdataBox .updataItem * {
  color: #424e67;
}
#cudUpdataBox .updataItem .updataItemName {
  flex: 2;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
#cudUpdataBox .updataItem .updataItemName .updataItemNameIcon {
  width: 30px;
  height: 30px;
  font-size: 30px !important;
}
#cudUpdataBox .updataItem .updataItemName .updataItemNameText {
  margin-left: 10px;
}
#cudUpdataBox .updataItem .updataItemProgress {
  flex: 3;
  display: inline-flex;
  align-items: center;
}
#cudUpdataBox .updataItemProgress .bottom {
  margin-left: 20px;
}
#cudUpdataBox .updataItemProgress .bottomFile {
  display: none;
}
#cudUpdataBox .updataItemProgress .remove {
  display: none;
}
#cudUpdataBox .updataItemProgress .second-bar-box {
  height: 40px;
  display: none;
  align-items: flex-end;
}
#cudUpdataBox .updataItemProgress .bottom:hover {
  color: #00ffff !important;
  cursor: pointer !important;
}
#cudUpdataBoxSmall {
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 0px;
  right: 50px;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(166, 255, 255, 0.4);
  z-index: 99;
}
.qiepian {
  z-index: 100;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background-image: -webkit-linear-gradient(bottom, #accbee 0%, #e7f0fd 100%);
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  overflow: hidden;
}
.wave {
  width: 200%;
  height: 200%;
  position: absolute;
  top: -25%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  border-radius: 35%;
  background: rgba(255, 255, 255, 0.75);
  -webkit-animation: wave 15s infinite linear;
  animation: wave 15s infinite linear;
}
@keyframes wave {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}

.perspective {
  -webkit-perspective: 70vh;
  perspective: 70vh;
  text-align: center;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  position: relative;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.perspective:hover {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

.bar-input {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
}

#second-bar .bar-input {
  width: 150px;
}

.bar {
  display: inline-block;
  position: relative;
  -webkit-transform: rotateX(55deg);
  transform: rotateX(55deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.bar .bar-face {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.bar .bar-face.front {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.bar .bar-face.percentage:before {
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  margin: 0;
}

#second-bar .bar {
  width: 150px;
  height: 20px;
}
#second-bar .bar .bar-face {
  background: rgba(60, 75, 132, 0.5);
  background-image: linear-gradient(
    90deg,
    rgba(134, 114, 146, 0.5) rgba(60, 75, 132, 0.1)
  );
  background-repeat: repeat repeat;
}
#second-bar .bar .bar-face.floor {
  box-shadow: 0 1.3em 1.2em -0.4em rgba(0, 0, 70, 0.25),
    0 -2em 15em 0.5em #4d5075, 0 -0.75em 25em 10em rgba(255, 255, 255, 0.4);
}
#second-bar .bar .bar-face.percentage:before {
  box-shadow: 0 1.6em 7em -0.3em rgb(255, 255, 255, 0.9);
}
#second-bar .bar .bar-face.roof {
  -webkit-transform: translateZ(20px);
  transform: translateZ(20px);
}
#second-bar .bar .bar-face.back {
  -webkit-transform: rotateX(-90deg) translateZ(-20px);
  transform: rotateX(-90deg) translateZ(-20px);
}
#second-bar .bar .bar-face.percentage:before {
  opacity: 0.9;
}
.second-bar-box-init {
  display:  block;
  width: 150px;
}
.second-bar-box-init span.load {
  text-align: center;
  text-transform: uppercase;
  font-family: "Nunito", sans-serif;
  color: transparent;
  letter-spacing: 0.01em;
}
.load span {
  text-shadow: 0 0 2px rgba(204, 208, 212, 0.9), 0 15px 25px rgba(77,80,117),
    0 -2px 3px rgba(77,80,117, 0.9), 0 -5px 10px rgba(255, 255, 255, 0.5),
    0 5px 10px rgba(77,80,117, 0.1), 0 3px 4px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.45);

  animation: loading 1.2s ease-in-out infinite alternate;
}

@keyframes loading {
  to {
    text-shadow: 0 0 2px rgba(204, 208, 212, 0.2), 0 0 3px rgba(77,80,117, 0.02),
      0 0 0 rgba(77,80,117, 0), 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(77,80,117, 0), 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 255, 255, 0);
  }
}

.load span:nth-child(2) {
  animation-delay: 0.15s;
}
.load span:nth-child(3) {
  animation-delay: 0.3s;
}
.load span:nth-child(4) {
  animation-delay: 0.45s;
}
.load span:nth-child(5) {
  animation-delay: 0.6s;
}
.load span:nth-child(6) {
  animation-delay: 0.75s;
}
.load span:nth-child(7) {
  animation-delay: 0.9s;
}
.load span:nth-child(8) {
  animation-delay: 1.05s;
}
.load span:nth-child(9) {
  animation-delay: 1.2s;
}
